<template>
  <div id="DataMaintenance-messageType">
    <div class="flex-all pt10 pb10 pl12 pr12 bg-white height50">
      <div class="ct-head-left flex-al">
        <span class="left-line-orange mr10"></span>
        <span class="color-333 fs14">{{$t('classAffairsSet.classAffSettings.holidayManage.50zfihpma9k0')}}</span>
      </div>
      <div class="cr-head-right">
        <el-button type="primary" size="mini">{{$t('classAffairsSet.classAffSettings.holidayManage.50zfihpmbjc0')}}</el-button>
      </div>
    </div>
    <div class="pAll12 bt_EBEEF5">
      <div class="flex-al Inquire-box mb12">
        <div class="ipt-box" style="width:250px;">
          <el-input v-model="input" clearable :placeholder="$t('classAffairsSet.classAffSettings.holidayManage.50zfihpmbv00')"></el-input>
        </div>
        <el-button type="primary" size="mini" class="search-btn fs14">{{$t('classAffairsSet.classAffSettings.holidayManage.50zfihpmc6k0')}}</el-button>
      </div>
      <div class="holidaySetting-setting__box clearFloat">
        <div class="row-optera clearFloat">
          <div class="pull-left slect-time">
            <el-select @change="changeCalendar" v-model="calendar.year" :placeholder="$t('classAffairsSet.classAffSettings.holidayManage.50zfihpmchw0')">
              <el-option
                v-for="(item, index) in yearlist"
                :key="index"
                :label="item+$t('classAffairsSet.classAffSettings.holidayManage.50zfihpmcu00')"
                :value="item"
              ></el-option>
            </el-select>
          </div>
          <div class="pull-left slect-time">
            <el-select @change="changeCalendar" v-model="calendar.month" :placeholder="$t('classAffairsSet.classAffSettings.holidayManage.50zfihpmchw0')">
              <el-option
                v-for="(item, index) in monthlist"
                :key="index"
                :label="item+$t('classAffairsSet.classAffSettings.holidayManage.50zfihpmdc40')"
                :value="item"
              ></el-option>
            </el-select>
            <span class="btn-change">
              <i class="el-icon-caret-top prev" @click="changeMonth(1)"></i>
              <i class="el-icon-caret-bottom next" @click="changeMonth(-1)"></i>
            </span>
          </div>
        </div>
        <div class="calendar-cont clearFloat">
          <div class="calendar-left pull-left">
            <ul class="week" id="wk">
              <li>{{$t('classAffairsSet.classAffSettings.holidayManage.50zfihpmdn40')}}</li>
              <li>{{$t('classAffairsSet.classAffSettings.holidayManage.50zfihpmdy40')}}</li>
              <li>{{$t('classAffairsSet.classAffSettings.holidayManage.50zfihpme8w0')}}</li>
              <li>{{$t('classAffairsSet.classAffSettings.holidayManage.50zfihpmej40')}}</li>
              <li>{{$t('classAffairsSet.classAffSettings.holidayManage.50zfihpmeu40')}}</li>
              <li>{{$t('classAffairsSet.classAffSettings.holidayManage.50zfihpmf400')}}</li>
              <li>{{$t('classAffairsSet.classAffSettings.holidayManage.50zfihpmffk0')}}</li>
            </ul>
            <div id="day">
              <ul class="daylist">
                <li
                  v-for="(item, index) in daylist"
                  :key="index"
                  :style="{ 'background-color': item.type == 'year' ? '#FFE6E5' : '' }"
                  @click="cancelVisible = true"
                >
                  <p>{{ item.day }}</p>
                  <p v-if="item.type == 'year'" class="holi-tips">{{$t('classAffairsSet.classAffSettings.holidayManage.50zfihpmfuw0')}}</p>
                  <p v-if="item.type == 'year'" class="tips tips_1">{{$t('classAffairsSet.classAffSettings.holidayManage.50zfihpmg5c0')}}</p>
                  <p v-else-if="item.type == 'course'" class="tips tips_2">{{$t('classAffairsSet.classAffSettings.holidayManage.50zfihpmgg00')}}</p>
                </li>
              </ul>
            </div>
          </div>
          <!-- 日历结束 -->
          <div class="calendar-right pull-left" ref="auto_height_table">
            <div class="tableDiv" ref="auto_height_table">
              <normalTableCont
                :tableData="tableList"
                @handleSelectionChange="handleSelectionChange"
                @handSetting="handSetting"
              >
                <el-table-column
                  ref="fixedColumn"
                  :label="$t('classAffairsSet.classAffSettings.holidayManage.50zfihpmgq00')"
                  align="center"
                  width="120px"
                  fixed="right"
                >
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      size="small"
                      @click.native.prevent="handSee(scope.row)"
                    >{{$t('classAffairsSet.classAffSettings.holidayManage.50zfihpmh040')}}</el-button>
                    <el-button
                      type="text"
                      size="small"
                      @click.native.prevent="handSee(scope.row)"
                    >{{$t('classAffairsSet.classAffSettings.holidayManage.50zfihpmhas0')}}</el-button>
                  </template>
                </el-table-column>
              </normalTableCont>
            </div>
            <div class="duties-pagination">
              <el-pagination
                style="margin: 10px;"
                :current-page.sync="paging.curPage"
                :page-sizes="[10, 20, 30, 40]"
                :page-size.sync="paging.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="paging.pageTotal"
                @current-change="curPageChange"
                @size-change="pageSizeChange"
              ></el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>

    <SliderBox :showSliderBox="cancelVisible" width="500px" @hideSliderBox="hideSliderBox">
      <div class="pop-slider--box">
        <div class="pop-slider--title">
          <a href="javascript:;" class="call fs16 color-333">
            {{$t('classAffairsSet.classAffSettings.holidayManage.50zfihpmht00')}}
            <em></em>
          </a>
          <div class="flex-al">
            <el-button type="primary" size="mini" @click="confirmProp">{{$t('classAffairsSet.classAffSettings.holidayManage.50zfihpmi340')}}</el-button>
            <span class="close ml20 el-icon-close" @click="hideSliderBox"></span>
          </div>
        </div>
      </div>
      <div class="slider-content pAll20">
        <!--表单 -->
        <el-form label-width="100px" :model="ruleForm" ref="ruleForm">
          <el-form-item :label="$t('classAffairsSet.classAffSettings.holidayManage.50zfihpmid00')" prop="name" :rules="[{ required: true, message: $t('classAffairsSet.classAffSettings.holidayManage.50zfihpmils0') }]">
            <el-input clearable :placeholder="$t('classAffairsSet.classAffSettings.holidayManage.50zfihpmils0')" v-model="ruleForm.name" style="width:343px;"></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('classAffairsSet.classAffSettings.holidayManage.50zfihpmiz40')"
            prop="starttime"
            :rules="[{ required: true, message: $t('classAffairsSet.classAffSettings.holidayManage.50zfihpmj7w0') }]"
          >
            <el-date-picker
              type="date"
              :placeholder="$t('classAffairsSet.classAffSettings.holidayManage.50zfihpmj7w0')"
              value-format="yyyy-MM-dd"
              v-model="ruleForm.starttime"
              style="width:100%;"
            ></el-date-picker>
          </el-form-item>
          <el-form-item
            :label="$t('classAffairsSet.classAffSettings.holidayManage.50zfihpmjgo0')"
            prop="endtime"
            :rules="[{ required: true, message: $t('classAffairsSet.classAffSettings.holidayManage.50zfihpmjtw0') }]"
          >
            <el-date-picker
              type="date"
              :placeholder="$t('classAffairsSet.classAffSettings.holidayManage.50zfihpmjtw0')"
              value-format="yyyy-MM-dd"
              v-model="ruleForm.endtime"
              style="width:100%;"
            ></el-date-picker>
          </el-form-item>
          <el-form-item :label="$t('classAffairsSet.classAffSettings.holidayManage.50zfihpmk2o0')" prop="type" :rules="[{ required: true, message: $t('classAffairsSet.classAffSettings.holidayManage.50zfjr6r3so0') }]">
            <el-radio-group v-model="ruleForm.type">
              <el-radio :label="$t('classAffairsSet.classAffSettings.holidayManage.50zfihpmkbo0')"></el-radio>
              <el-radio :label="$t('classAffairsSet.classAffSettings.holidayManage.50zfihpmkk40')"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item :label="$t('classAffairsSet.classAffSettings.holidayManage.50zfihpmksw0')" :rules="[{ required: false, message: $t('classAffairsSet.classAffSettings.holidayManage.50zfihpml1s0') }]">
            <el-input type="textarea" v-model="ruleForm.intro" :placeholder="$t('classAffairsSet.classAffSettings.holidayManage.50zfihpml1s0')"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </SliderBox>
  </div>
</template>
<script>
import normalTableCont from "@/components/tables/normalTableCont.vue";
import SliderBox from "@/components/SliderBox";
export default {
  data() {
    let item = {
      a1: "222222222222222",
      a2: "222222222222222",
      a3: "222222222222222",
      a4: "222222222222222",
      a5: "222222222222222",
      a6: "222222222222222"
    };
    return {
      cancelVisible: false,
      // 表单
      ruleForm: {
        name: "",
        starttime: "",
        endtime: "",
        type: "",
        intro: ""
      },
      yearlist: [],
      monthlist: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
      daylist: [],
      calendar: {
        year: "",
        month: "",
        holiday: this.$t('classAffairsSet.classAffSettings.holidayManage.50zfihpmlao0')
      },

      input: "",
      // 表格数据
      tableList: {
        // 表格的列
        columns: [
          {
            fieldstring: "a1",
            fieldname: "111111",
            show: "1",
            sortable: true
          },
          {
            fieldstring: "a2",
            fieldname: "111111",
            show: "1"
          },
          {
            fieldstring: "a3",
            fieldname: "111111",
            show: "1"
          },
          {
            fieldstring: "a4",
            fieldname: "111111",
            show: "1"
          },
          {
            fieldstring: "a5",
            fieldname: "111111",
            show: "1"
          },
          {
            fieldstring: "a6",
            fieldname: "111111",
            show: "1"
          }
        ],
        // 表格数据
        list: Array(10).fill(item),
        options: {
          errortip: "", //空页面提示内容
          mutiSelect: false, //是否显示多选
          issetting: false, //是否可以编辑列
          tableHeight: 0
        }
      },
      // 分页
      paging: {
        curPage: 1,
        pageSize: 10,
        pageTotal: 10
      }
    };
  },
  components: {
    normalTableCont,
    SliderBox
  },
  created() {
    let date = new Date();
    this.calendar.year = date.getFullYear();
    this.yearlist.push(this.calendar.year);
    for (let i = 1; i <= 2; i++) {
      this.yearlist.push(this.calendar.year + i);
      this.yearlist.unshift(this.calendar.year - i);
    }
    this.calendar.month = date.getMonth() + 1;

    let dateTime = new Date();
    let year = dateTime.getFullYear();
    let month = dateTime.getMonth() + 1;
    let days = new Date(year, month, 0).getDate();

    for (let i = 0; i < days; i++) {
      this.daylist.push({
        type: i % 5 == 0 ? "year" : i % 5 == 1 ? "course" : "",
        day: i + 1 < 10 ? "0" + (i + 1) : i + 1
      });
    }
    // let day = `${this.calendar.year}-${
    //   this.calendar.month < 10 ? "0" + this.calendar.month : this.calendar.month
    // }`;
    // this.initData(day);
    // this.getMonthList(day);
    // this.holidays();
  },
  methods: {
    changeMonth(v) {
      console.log(v);
      if (this.calendar.month == 1 && v == -1) {
        this.calendar.month = 12;
      } else if (this.calendar.month == 12 && v == 1) {
        this.calendar.month = 1;
      } else {
        this.calendar.month += v;
      }
      // let day = `${this.calendar.year}-${
      //   this.calendar.month < 10
      //     ? "0" + this.calendar.month
      //     : this.calendar.month
      // }`;
      // this.getMonthList(day);
      // this.holidays();
    },
    changeCalendar() {
      // let day = `${this.calendar.year}-${
      //   this.calendar.month < 10
      //     ? "0" + this.calendar.month
      //     : this.calendar.month
      // }`;
      // this.initData(day);
      // this.getMonthList(day);
      // this.holidays();
    },
    // 复选框
    handleSelectionChange(v) {
      console.log(v);
    },
    // 编辑列编辑提交
    handSetting(v) {
      console.log(v);
    },
    // 页码变化
    curPageChange(v) {
      this.paging.curPage = v;
    },
    // pageSize改变
    pageSizeChange() {
      this.paging.curPage = 1;
    },
    //侧边栏-右边弹窗 - 关闭
    hideSliderBox() {
      this.cancelVisible = !this.cancelVisible;
    },
    //侧边栏-右边弹窗 - 确定
    confirmProp() {
      if (!this.$Tool.isNull("ruleForm", this)) {
        return;
      } else {
        this.cancelVisible = !this.cancelVisible;
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      if (this.$refs["auto_height_table"]) {
        this.tableList.options.tableHeight = this.$Tool.getTableHeight(
          this.$refs.auto_height_table.getBoundingClientRect().top + 80
        );
      }
    });
  }
};
</script>
<style lang="less">
.holidaySetting-setting__box {
  padding: 20px 0;
  .calendar-cont {
    margin-top: 20px;
    & > div {
      width: 49%;
    }
    .calendar-left {
      margin-right: 20px;
    }
    .calendar-right {
      border: 1px solid #ddd;
      .right-title {
        padding: 20px;
      }
    }
  }
  .btn-time {
    padding-right: 10px;
    display: inline-block;
    margin-left: 20px;
    .el-input--medium .el-input__inner {
      height: 30px;
      line-height: 30px;
    }
    .el-input--medium .el-input__icon {
      line-height: 30px;
    }
    .word {
      display: inline-block;
      margin: 0px 10px;
    }
  }
  .row-optera {
    .el-select .el-input.is-focus .el-input__inner {
      border: none;
    }
    .el-input__inner {
      border: none;
      border-bottom: 1px solid #dcdfe6;
      border-radius: 0px;
      height: 32px;
      line-height: 32px;
    }
    .el-icon-arrow-up:before {
      content: "";
    }
    .el-select {
      width: 100px;
    }
    .el-button--medium {
      padding: 8px 15px;
    }
    .slect-time {
      position: relative;
      margin-right: 35px;
      .btn-change {
        position: absolute;
        z-index: 50;
        right: 0px;
        i {
          display: block;
        }
      }
    }
  }
  // 表格样式
  .el-table--border th {
    background: #f0f4f9;
    color: #92a3b7;
  }
  //日历样式
  .calendar-left {
    #wk {
      width: 100%;
      border: 1px solid #ddd;
      border-bottom: none;
      li {
        display: inline-block;
        width: 14.2%;
        text-align: center;
        padding: 4% 0px;
      }
    }

    #day {
      border: 1px solid #ddd;
      border-bottom: none;
      border-right: none;
      ul {
        display: flex;
        flex-wrap: wrap;
        li {
          width: 14.2857%;
          height: 80px;
          text-align: center;
          border: 1px solid #ddd;
          border-top: none;
          border-left: none;
          display: flex;
          flex-direction: column;
          justify-content: center;
          cursor: pointer;
          position: relative;
          .holi-tips {
            position: absolute;
            bottom: 5px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 12px;
            color: #d72e2c;
          }
          .tips {
            position: absolute;
            top: 0;
            left: 0;
            width: 20px;
            height: 20px !important;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .tips_1 {
            background-color: #d72d2d;
          }
          .tips_2 {
            background-color: #20a8d8;
          }
        }
      }
    }
  }
}
</style>